<template>
    <div class="guide">
        <Header></Header>
        <div class="content">
            <p class="title">新手向导</p>
            <ul class="outline">
                <li>概要 ：</li>
                <li>1.在系统首页录入区域信息、阅读器编号、固定资产信息以及电子标签编号（首次使用平台请最先录入区域信息）</li>
                <li>2.系统将进行自动匹配。固定资产与电子标签一一绑定，阅读器与区域对应。</li>
                <li>3.实地布置。在首页“查看固定资产”页面导出最新表格，参照表格将电子标签贴到对应的固定资产上。在首页“查看区域”页面导出最新表格，参照表格将阅读器布置到对应的区域里。</li>
                <li>4.开始对固定资产进行监测，使用实时盘点、定位查找、安全管理等功能。</li>
            </ul>
            <div class="step step1">
                <h2>第一步：布置区域。</h2>
                <p>1.进入首页，选择“布置区域”。2.下载模板。3.填写表格。4.上传。</p>
                <img src="@/assets/images/guide_01.png" alt="step-one">
                <img src="@/assets/images/guide_02.png" alt="step-two">
            </div>
            <div class="step step2">
                <h2>第二步：布置阅读器、录入固定资产信息、录入电子标签。</h2>
                <p>1.进入首页，选择“布置阅读器”，批量录入阅读器编号。2.进入首页，选择“新增固定资产”，如上录入固定资产信息。3.进入首页，“新增电子标签”，批量录入电子标签。</p>
                <img src="@/assets/images/guide_03.png" alt="step-three">
            </div>
            <div class="step step3">
                <h2>第三步：实地布置</h2>
                <p>在首页“查看固定资产”页面导出最新表格，参照表格将电子标签贴到对应的固定资产上。在首页“查看区域”页面导出最新表格，参照表格将阅读器布置到对应的区域里。</p>
                <img src="@/assets/images/guide_04.png" alt="step-four">
                <img src="@/assets/images/guide_05.png" alt="step-five">
            </div>
            <div class="step step4">
                <h2>第四步：开始对固定资产进行监测，使用实时盘点、定位查找、安全管理等功能。</h2>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from '@/components/header'

    export default {
        name: "guide",
        components: {
            Header
        },
    }
</script>

<style lang="scss" type="text/scss" scoped>
    @import "../assets/css/color";

    .content {
        box-sizing: border-box;
        height: 88vh;
        margin: 1vh 0;
        overflow: auto;
        padding: 0 1rem;
        .title {
            font-size: 0.20rem;
            padding: 0.08rem 0.3rem;
            border-left: 0.06rem solid $strong_red;
            margin-bottom: 0.2rem;
        }
        .outline {
            li {
                height: 0.3rem;
                line-height: 0.3rem;
            }
        }
        .step {
            margin: 0.3rem 0;
            h2 {
                margin: 0.2rem 0;
                font-size: 0.20rem;
            }
            img {
                margin: 0.2rem 0;
                margin-right: 0.4rem;
                width: 6.9rem;
                height: 3.38rem;
            }
        }
    }
</style>
